<template>
	<view class="container">
		<!-- 骨架屏 -->
		<view class="skeleton-container" v-if="loading && isLogin">
			<view class="skeleton-header">
				<skeleton :show-avatar="true" avatar-size="120rpx" :show-title="true" title-width="40%"
					title-height="36rpx"></skeleton>
			</view>
			<view class="skeleton-content">
				<skeleton :show-cards="true" :cards-count="4" card-width="48%" card-height="400rpx" card-margin="20rpx">
				</skeleton>
			</view>
		</view>

		<!-- 未登录状态 -->
		<view v-else-if="!isLogin">
			<view class="profile-header" :style="{ paddingTop: statusBarHeight+ 40 + 'px' }">
				<view class="header-gradient"></view>
				<view class="user-info">
					<image class="avatar unlogged" src="/static/default-avatar.png" mode="aspectFill"></image>
					<view class="login-prompt">
						<text class="login-text">欢迎来到又想要了~</text>
						<text class="login-subtext">登录后可查看更多精彩内容</text>
					</view>
				</view>
			</view>

			<!-- 未登录时的提示 -->
			<view class="not-login-content">
				<view class="login-card">
					<image class="empty-image" src="/static/empty-state.png" mode="aspectFit"></image>
					<view class="login-message">
						<text class="empty-text">登录后查看更多内容</text>
						<text class="login-benefits">登录后可以发布笔记、关注好友、获取收益</text>
					</view>
					<button class="login-now-btn" @click="showLoginAuth">
						<text class="btn-text">立即登录</text>
						<text class="btn-icon">→</text>
					</button>
				</view>
			</view>
		</view>

		<!-- 已登录状态 -->
		<block v-else>
			<view class="profile-header" :style="{ paddingTop: statusBarHeight + 'px' }">
				<view class="header-gradient"></view>
				<view class="user-info">
					<image class="avatar" :src="userInfo.image" mode="aspectFill"></image>
					<view class="user-detail-container">
						<view class="user-detail">
							<text class="nickname">{{userInfo.name}}</text>
							<text class="xiaohongshu-id">ID号：{{userInfo.id}}</text>
						</view>
					</view>
				</view>

				<!-- 收益信息展示 -->
				<view class="user-stats" v-if="isLogin && isDetele==0">
					<view class="stat-item">
						<text class="num">{{userInfo.follows}}</text>
						<text class="label">今日收益</text>
					</view>
					<view class="stat-item">
						<text class="num">{{userInfo.fans}}</text>
						<text class="label">昨日收益</text>
					</view>
					<view class="stat-item" @click="goBack">
						<text class="num">{{userInfo.total}}</text>
						<text class="label">总金额</text>
					</view>
				</view>

				<!-- 用户功能按钮区，当收益信息不显示时展示 -->
				<view class="user-features" v-else>
					<view class="feature-item" @click="getEdit">
						<view class="feature-icon">
							<uni-icons type="person" size="24" color="#ff6b9a"></uni-icons>
						</view>
						<text class="feature-text">个人资料</text>
					</view>
					<view class="feature-item" @click="goToPublish">
						<view class="feature-icon">
							<uni-icons type="plusempty" size="24" color="#ff9a6b"></uni-icons>
						</view>
						<text class="feature-text">发布</text>
					</view>
				</view>
			</view>

			<!-- 内容标签页 -->
			<view class="content-tabs">
				<view class="tab-header">
					<view class="tab-item active">
						<text>作品</text>
					</view>
				</view>

				<!-- 笔记内容 -->
				<scroll-view class="content-list" scroll-y>
					<!-- 有数据时显示瀑布流 -->
					<view class="tab-content">
						<view class="waterfall" v-if="contentList && contentList.length > 0">
							<view class="waterfall-item" v-for="(item, index) in contentList" :key="index"
								@click="goToDetail(item)">
								<image class="item-image" :src="item.image" mode="widthFix"></image>
								<view class="item-info">
									<text
										class="item-title">{{item.content.length>15 ? item.content.substring(0,15)+'...' : item.content}}</text>
									<text class="item-price" v-if="isDetele ==0">￥{{item.amount}}</text>
								</view>
							</view>
						</view>
						<!-- 无数据时显示空状态 -->
						<view class="empty-state" v-else>
							<view class="empty-icon">
								<uni-icons type="folder-add" size="50" color="#cccccc"></uni-icons>
							</view>
							<text class="empty-text">暂无帖子</text>
							<text class="empty-tips">快去发布你的第一篇帖子吧</text>
							<button class="create-btn" @click="goToPublish">去发布</button>
						</view>
					</view>
				</scroll-view>
			</view>
		</block>

		<view class="tab-bar-holder">
			<tab-bar-vue :currentIndex="2"></tab-bar-vue>
		</view>
	</view>
</template>

<script>
	import {
		getUserDetail,
		getUserPostsDetail,
		login,
		getSetings
	} from "@/request/API.js";
	import tabBarVue from '../../compents/tab-bar/tab-bar.vue';
	import Skeleton from '../../compents/skeleton/skeleton.vue';

	export default {
		data() {
			return {
				statusBarHeight: 0,
				userInfo: {},
				contentList: [],
				isLogin: false,
				isDetele: 0,
				loading: true // 添加加载状态
			}
		},
		created() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
		},
		onLoad() {
			this.init();
		},
		components: {
			tabBarVue,
			Skeleton
		},
		methods: {
			async init() {
				this.loading = true; // 开始加载
				try {
					let code = await getSetings();
					this.isDetele = code.data.isDelete;
					const id = uni.getStorageSync("userId");
					if (!id) {
						this.isLogin = false;
						this.loading = false; // 未登录，停止加载
						return;
					}
					this.isLogin = true;
					const {
						data
					} = await getUserDetail(id);
					this.userInfo = data;
					const reslut = await getUserPostsDetail(id);
					this.contentList = reslut.data;
				} catch (error) {
					console.error('加载用户数据失败:', error);
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					});
				} finally {
					this.loading = false; // 加载完成
				}
			},
			goBack() {
				uni.navigateTo({
					url: "/pages/cy-earnings/cy-earnings?total=" + this.userInfo.total
				})
			},
			getEdit() {
				uni.navigateTo({
					url: "/pages/edit-profile/edit-profile"
				})
			},
			showLoginAuth() {
				// 显示微信授权弹窗
				let that = this;
				uni.showModal({
					title: '微信授权',
					content: '申请获得以下权限\n· 获得你的公开信息（昵称、头像、地区及性别）',
					confirmText: '允许',
					cancelText: '拒绝',
					confirmColor: '#07c160',
					success: function(res) {
						if (res.confirm) {
							// 用户点击允许，执行登录逻辑
							that.goToLogin();
						} else {
							// 用户拒绝授权
							uni.showToast({
								title: '您拒绝了授权请求',
								icon: 'none',
								duration: 2000
							});
						}
					}
				});
			},
			goToLogin() {
				let that = this;
				uni.login({
					async success(res) {
						const {
							data
						} = await login(
							res.code
						)
						uni.setStorageSync("userId", data.id);
						that.init();
					}
				})
			},
			goToDetail(item) {
				// 实现跳转到详情页的逻辑
				console.log('跳转到详情页', item)
				getApp().globalData.data = item;
				uni.navigateTo({
					url: "/pages/tong/tong"
				})
			},
			goToPublish() {
				uni.navigateTo({
					url: '/pages/publish/publish'
				});
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #fafafa;
		padding-bottom: 100rpx;
		/* 为底部导航栏预留空间 */
	}

	.profile-header {
		padding: 30rpx;
		padding-top: 100rpx;
		background: #fff;
		margin-top: 0;
		position: relative;
		overflow: hidden;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.header-gradient {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 600rpx;
		background: linear-gradient(135deg, #ff4f4f, #ff9292);
		opacity: 0.9;
		z-index: 0;
	}

	.user-info {
		display: flex;
		align-items: flex-start;
		margin-top: 40rpx;
		position: relative;
		z-index: 1;
		margin-bottom: 40rpx;
	}

	.avatar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		margin-right: 40rpx;
		border: 6rpx solid #fff;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		transition: transform 0.3s;
	}

	.avatar:active {
		transform: scale(0.96);
	}

	.user-detail-container {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.user-detail {
		display: flex;
		flex-direction: column;
		margin-bottom: 16rpx;
		margin-top: 50rpx;
	}

	.nickname {
		font-size: 42rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}

	.xiaohongshu-id {
		font-size: 26rpx;
		color: #fff;
		display: block;
	}

	.edit-btn {
		align-self: flex-start;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 8rpx 20rpx;
		background: rgba(255, 255, 255, 0.9);
		border: 1px solid #ff4785;
		color: #ff4785;
		font-size: 24rpx;
		border-radius: 30rpx;
		line-height: 1.5;
		box-shadow: 0 2rpx 8rpx rgba(255, 71, 133, 0.1);
	}

	.edit-btn:after {
		border: none;
	}

	.edit-btn text {
		margin-left: 4rpx;
	}

	.user-stats {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		position: relative;
		z-index: 1;
		margin-top: 20rpx;
	}

	/* 用户功能区样式 */
	.user-features {
		display: flex;
		justify-content: space-around;
		padding: 30rpx 20rpx;
		position: relative;
		z-index: 1;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 16rpx;
		margin: 20rpx auto;
	}

	.feature-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		transition: all 0.3s;
	}

	.feature-item:active {
		transform: scale(0.95);
	}

	.feature-icon {
		width: 80rpx;
		height: 80rpx;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.feature-text {
		font-size: 24rpx;
		color: #333;
		font-weight: 500;
	}

	.content-tabs {
		flex: 1;
		margin-top: 20rpx;
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
	}

	.tab-header {
		display: flex;
		border-bottom: 1px solid #f5f5f5;
		position: relative;
	}

	.divider {
		position: absolute;
		width: 1px;
		height: 30rpx;
		background-color: #eee;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.tab-item {
		flex: 1;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: #666;
		position: relative;
		transition: all 0.3s;
	}

	.tab-item.active {
		color: #ff4f4f;
		font-weight: bold;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 4rpx;
		background: #ff4f4f;
		border-radius: 2rpx;
	}

	.tab-content {
		min-height: 600rpx;
	}

	.waterfall {
		column-count: 2;
		column-gap: 20rpx;
	}

	.waterfall-item {
		break-inside: avoid;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
		background: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s;
	}

	.waterfall-item:active {
		transform: scale(0.98);
		box-shadow: 0 1rpx 5rpx rgba(0, 0, 0, 0.08);
	}

	.item-image {
		width: 100%;
		height: auto;
		display: block;
	}

	.item-info {
		display: flex;
		justify-content: space-between;
		padding: 16rpx;
	}

	.item-title {
		font-size: 28rpx;
		color: #333;
		display: block;
		margin-bottom: 12rpx;
		line-height: 1.4;
	}

	.item-price {
		font-size: 30rpx;
		color: #ff4f4f;
		font-weight: bold;
	}

	.item-stats {
		font-size: 24rpx;
		color: #999;
		margin-top: 8rpx;
	}

	.not-login-content {
		padding: 60rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.login-card {
		background-color: #fff;
		border-radius: 24rpx;
		padding: 50rpx 40rpx;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.05);
		position: relative;
		margin-top: 20rpx;
	}

	.login-message {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.login-benefits {
		font-size: 26rpx;
		color: #999;
		text-align: center;
		margin-top: 16rpx;
		max-width: 450rpx;
		line-height: 1.5;
	}

	.login-now-btn {
		background: linear-gradient(135deg, #ff4f4f, #ff9292);
		color: #fff;
		font-size: 32rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		box-shadow: 0 8rpx 16rpx rgba(255, 79, 79, 0.25);
		border: none;
		width: 300rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		overflow: hidden;
		transition: all 0.3s;
	}

	.login-now-btn::after {
		border: none;
	}

	.login-now-btn:active {
		transform: translateY(3rpx) scale(0.98);
		box-shadow: 0 4rpx 8rpx rgba(255, 79, 79, 0.2);
	}

	.btn-text {
		margin-right: 8rpx;
		font-weight: 500;
	}

	.btn-icon {
		font-size: 28rpx;
		font-weight: bold;
		transition: transform 0.3s;
	}

	.login-now-btn:active .btn-icon {
		transform: translateX(8rpx);
	}

	.empty-image {
		width: 220rpx;
		height: 220rpx;
		margin-bottom: 30rpx;
		opacity: 0.9;
	}

	.empty-text {
		font-size: 30rpx;
		color: #666;
		margin-bottom: 30rpx;
	}

	.empty-state {
		padding: 120rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.empty-icon {
		margin-bottom: 30rpx;
	}

	.empty-tips {
		font-size: 26rpx;
		color: #999;
	}

	.tab-bar-holder {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.05);
	}

	.avatar.unlogged {
		width: 140rpx;
		height: 140rpx;
		border: 8rpx solid rgba(255, 255, 255, 0.8);
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.1);
		position: relative;
		margin-left: 20rpx;
	}

	.login-prompt {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.login-text {
		font-size: 36rpx;
		color: #333;
		font-weight: 600;
		margin-bottom: 12rpx;
	}

	.login-subtext {
		font-size: 26rpx;
		color: #666;
		max-width: 340rpx;
	}

	.skeleton-container {
		padding: 20rpx;
		background-color: #fff;
	}

	.skeleton-header {
		height: 300rpx;
		background: linear-gradient(180deg, #ff6b9a 0%, #ff4785 100%);
		border-radius: 0 0 30rpx 30rpx;
		padding: 120rpx 40rpx 40rpx;
		margin-bottom: 30rpx;
	}

	.skeleton-content {
		padding: 20rpx;
	}

	.skeleton-content .skeleton-cards {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.skeleton-content .skeleton-card {
		margin-bottom: 20rpx !important;
		border-radius: 12rpx;
	}

	.create-btn {
		margin-top: 30rpx;
		background: linear-gradient(to right, #ff6b9a, #ff4785);
		color: #fff;
		font-size: 28rpx;
		padding: 12rpx 40rpx;
		border-radius: 40rpx;
		border: none;
		box-shadow: 0 6rpx 16rpx rgba(255, 71, 133, 0.3);
	}

	.create-btn:after {
		border: none;
	}
</style>